<script setup>
defineProps({
  resList: {
    type: Array,
    default: () => []
  }
})

const emits = defineEmits(['select'])

const select = (e) => {
  emits('select', e)
}
</script>

<template>
  <scroll-view class="search-list">
    <view v-for="item in resList" :key="item.id" class="item" @click="select(item)">
      <view class="left">
        <up-avatar :text="`${item?.name?.charAt(0)}`" font-size="40rpx" randomBgColor size="70rpx"></up-avatar>
        <up-text :suffix-icon=" `${item.stuid || item.id}`" :text="item?.name"
                 icon-style="margin-left:50rpx;font-size:22rpx;color:D3DADD;" lines="1"
                 margin="0 10rpx" size="40rpx"
                 style="font-weight: 500;"
        ></up-text>
      </view>
      <view class="right">
        <up-text v-if="item.order" :text="`引用${item.order}次`" color="#393939FF" custom-style="width:150rpx"
                 size="24rpx"></up-text>
        <up-text color="#D3DADD" margin="0 20rpx 0 0" text="|"></up-text>
        <up-icon name="star"></up-icon>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
.search-list {
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    background-color: #fff;
    padding: 60rpx 30rpx;
    border-radius: 20rpx;
    margin: 20rpx 0;

    .left {
      display: flex;

    }

    .right {
      display: flex;
    }
  }
}
</style>